<template>
  <dl class="row">
    <dt class="col-4 text-end">公司名称</dt>
    <dd class="col-8">
      <router-link :to="`/customer?id=` + detailInfo.id">{{
        detailInfo.vipName
      }}</router-link>
    </dd>
    <dt class="col-4 text-end">状态</dt>
    <dd class="col-8">
      <span v-if="detailInfo.status === 0" class="text-danger">停用</span>
      <span v-if="detailInfo.status === 1" class="text-success">启用</span>
    </dd>
    <dt class="col-4 text-end">是否测试模式</dt>
    <dd class="col-8">
      <span v-if="detailInfo.testMode === 0">否</span>
      <span v-if="detailInfo.testMode === 1" class="text-danger">是</span>
    </dd>
    <dt class="col-4 text-end">短信发送模式</dt>
    <dd class="col-8">
      <span v-if="detailInfo.smsMode === 0" class="text-danger">手工</span>
      <span v-if="detailInfo.smsMode === 1" class="text-success">自动</span>

      <template v-if="isAdmin">
        <button
          type="button"
          class="btn btn-primary btn-sm float-end"
          @click.stop="switchSmsMode(0)"
          v-if="detailInfo.smsMode === 1"
        >
          改为手工
        </button>
        <button
          type="button"
          class="btn btn-primary btn-sm float-end"
          @click.stop="switchSmsMode(1)"
          v-if="detailInfo.smsMode === 0"
        >
          改为自动
        </button>
      </template>
    </dd>
    <dt class="col-4 text-end">服务分组代码</dt>
    <dd class="col-8">{{ detailInfo.groupCode }}</dd>
    <dt class="col-4 text-end">服务费模板</dt>
    <dd class="col-8">
      {{ detailInfo.templateName }}

      <button
        class="btn btn-warning btn-sm float-end"
        @click.stop="editServiceTemplate()"
        v-if="isAdmin"
      >
        修改
      </button>
    </dd>
    <dt class="col-4 text-end">公司全称</dt>
    <dd class="col-8">{{ detailInfo.fullName }}</dd>
    <dt class="col-4 text-end">客户编号</dt>
    <dd class="col-8">{{ detailInfo.customerCode }}</dd>
    <dt class="col-4 text-end">客户类型</dt>
    <dd class="col-8">
      <span v-if="detailInfo.enterpriseType === 1">企业</span>
      <span v-else>散客</span>
    </dd>
    <dt class="col-4 text-end">排序拼音</dt>
    <dd class="col-8">{{ detailInfo.pinyin }}</dd>
    <dt class="col-4 text-end">服务项目</dt>
    <dd class="col-8">{{ detailInfo.serviceItem }}</dd>
    <dt class="col-4 text-end">销售员</dt>
    <dd class="col-8">{{ detailInfo.salesStaff }}</dd>
    <dt class="col-4 text-end">客户维护人</dt>
    <dd class="col-8">{{ detailInfo.customerMaintainer }}</dd>
    <dt class="col-4 text-end">协议开始日期</dt>
    <dd class="col-8">{{ detailInfo.agreementBeginDate }}</dd>
    <dt class="col-4 text-end">协议结束日期</dt>
    <dd class="col-8">{{ detailInfo.agreementEndDate }}</dd>
    <dt class="col-4 text-end">合同负责人</dt>
    <dd class="col-8">{{ detailInfo.contractLinkman }}</dd>
    <dt class="col-4 text-end">合同负责人联系电话</dt>
    <dd class="col-8">{{ detailInfo.contractLinkPhone }}</dd>
    <dt class="col-4 text-end">账单联系人</dt>
    <dd class="col-8">{{ detailInfo.linkman }}</dd>
    <dt class="col-4 text-end">联系电话</dt>
    <dd class="col-8">{{ detailInfo.phone }}</dd>
    <dt class="col-4 text-end">电子邮箱</dt>
    <dd class="col-8">{{ detailInfo.email }}</dd>
    <dt class="col-4 text-end">邮寄地址</dt>
    <dd class="col-8">{{ detailInfo.address }}</dd>
    <dt class="col-4 text-end">结算方式类型</dt>
    <dd class="col-8">
      {{ getSettlementTypeDesc(detailInfo.settlementType) }}
    </dd>
    <dt class="col-4 text-end">结算方式备注</dt>
    <dd class="col-8">{{ detailInfo.settlementMode }}</dd>
    <dt class="col-4 text-end">结算周期</dt>
    <dd class="col-8">{{ detailInfo.settlementPeriod }}</dd>
    <dt class="col-4 text-end">出票是否需审核</dt>
    <dd class="col-8">
      <span v-if="detailInfo.approvalTicket === 1">是</span>
      <span v-else>否</span>
    </dd>
    <dt class="col-4 text-end">出票审核方式</dt>
    <dd class="col-8">{{ getApprovalTypeDesc(detailInfo.approvalType) }}</dd>
    <dt class="col-4 text-end">审核方式备注</dt>
    <dd class="col-8">{{ detailInfo.approvalMode }}</dd>
    <dt class="col-4 text-end">行程单</dt>
    <dd class="col-8">{{ getItineraryTypeDesc(detailInfo.itineraryType) }}</dd>
    <dt class="col-4 text-end">备注</dt>
    <dd class="col-8">{{ detailInfo.remark }}</dd>
   
    <dt class="col-4 text-end">创建时间</dt>
    <dd class="col-8">{{ detailInfo.createTime }}</dd>
    <dt class="col-4 text-end">最后修改时间</dt>
    <dd class="col-8">{{ detailInfo.lastUpdate }}</dd>
    <dt class="col-4 text-end"></dt>
    <dd class="col-8"></dd>

      <my-modal-template-update
        ref="modalUpdateTemplate"
      ></my-modal-template-update>
  </dl>
</template>

<script>
import {
  saveCustomerSmsMode,
  getSettlementTypeDesc,
  getApprovalTypeDesc,
  getItineraryTypeDesc,
} from "@/api/customer.js";
import { saveCustomerTemplate } from "@/api/admin.js";

import MyModalTemplateUpdate from "@/components/modal/my-modal-service-template-update.vue";

export default {
  components: {
    MyModalTemplateUpdate,
  },
  props: {
    detailInfo: {
      type: Object,
    },
    needRefresh: 0,
  },
  data() {
    return {
      modalTitle: "",
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", {
        loadingText: msg,
      });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    getSettlementTypeDesc: function (val) {
      return getSettlementTypeDesc(val);
    },
    getApprovalTypeDesc: function (val) {
      return getApprovalTypeDesc(val);
    },
    getItineraryTypeDesc: function (val) {
      return getItineraryTypeDesc(val);
    },
    switchSmsMode: function (smsMode) {
      const params = {
        smsMode,
      };
      saveCustomerSmsMode(this.detailInfo.id, params, (v) => {
        console.log(v);
        if (v.status === "OK") {
          this.showErrMsg("切换成功");
          this.$emit("update:needRefresh", 1);
        }
      });
    },
    editServiceTemplate: function () {
      this.$refs.modalUpdateTemplate
        .modal(this.detailInfo.templateCode)
        .then((info) => {
          const params = {
            customerId: this.detailInfo.id,
            templateCode: info.code,
          };

          // const jsonParam = JSON.stringify(params)

          saveCustomerTemplate(params, (v) => {
            if (v.status === "OK") {
              this.showErrMsg("保存成功");
              this.$emit("update:needRefresh", 1);
            } else {
              this.showErrMsg("保存失败：" + v.errmsg, "danger");
            }
          });
        });
    },
  },
};
</script>
